<template>
  <div class="detail">
    <!-- 头部标签 -->
    <van-nav-bar
      title="文章详情"
      class="detail-title" fixed z-index="99"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 文章标题 -->
    <h1>{{ detailObj.title }}</h1>
    <!-- 作者信息 -->
    <div class="author">
      <div class="avatar">
        <img :src="detailObj.aut_photo" alt="">
      </div>
      <div class="content">
        <div class="name">{{ detailObj.aut_name }}</div>
        <div class="time">{{ detailObj.pubdate | timeFilter }}</div>
      </div>
      <div class="aut-btn">
        <van-button type="info" @click="follow(detailObj.aut_id)" v-if="detailObj.is_followed === false"><van-icon name="plus" />关注</van-button>
        <van-button type="info" @click="unFollow(detailObj.aut_id)" v-else>已关注</van-button>
      </div>
    </div>
    <!-- 文章内容 -->
    <div class="art-content">
      <van-cell>
        <template #title>
          <div v-html="detailObj.content"></div>
        </template>
      </van-cell>
    </div>
    <!-- 点赞 & 不喜欢区域 -->
    <div class="like">
      <van-button plain round type="danger" @click="cancelZan" v-if="detailObj.attitude === 1"><van-icon name="like" />点赞</van-button>
      <van-button plain round type="default" @click="like" v-else><van-icon name="like" />点赞</van-button>
      <van-button plain round type="danger" @click="cancelDislike" v-if="detailObj.attitude === 0"><van-icon name="delete" />不喜欢</van-button>
      <van-button plain round type="default" @click="dislike" v-else><van-icon name="delete" />不喜欢</van-button>
    </div>
    <!-- 评论区域 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">
      <!-- 评论列表 -->
      <comment :isReply="true" :item="item" v-for="(item, index) in commentList" :key="index"></comment>
    </van-list>
    <!-- 写评论区域 -->
    <write @passCom="passCom" :isReply="false"></write>
    <reply ref="reply"></reply>
  </div>
</template>

<script>
import comment from './com/comment'
import write from './com/write'
import reply from './com/reply'
import { apiGetDetail, apiCancelZan, apiLikeArticle, apiCancelDislike, apiDislike } from '@/api/article.js'
import { apiFollow, apiUnFollow } from '@/api/user.js'
import { apiGetComment } from '@/api/comment.js'

export default {
  components: {
    comment,
    write,
    reply
  },
  data () {
    return {
      loading: false,
      finished: false,
      artid: this.$route.params.artid,
      detailObj: {},
      offset: null,
      limit: 10,
      commentList: [],
      endid: null
    }
  },
  methods: {
    async onLoad () {
      console.log('onload')
      // 获取评论列表
      const res = await apiGetComment({
        artid: this.artid,
        offset: this.offset,
        limit: this.limit
      })
      console.log('评论数据', res)
      // this.commentList = res.data.results
      this.commentList = [...this.commentList, ...res.data.results]
      this.loading = false
      this.offset = res.data.last_id
      this.endid = res.data.end_id
      if (this.offset === this.endid) {
        this.finished = true
      }
    },
    // 获取文章详情
    async getDetail () {
      const res = await apiGetDetail(this.artid)
      console.log('文章详情', res)
      this.detailObj = res.data
    },
    // 关注作者
    async follow (autid) {
      // 发送请求数据
      await apiFollow(autid)
      // 手动将关注改为true
      this.detailObj.is_followed = true
    },
    // 取消关注
    async unFollow (autid) {
      await apiUnFollow(autid)
      // 手动将关注状态改为false
      this.detailObj.is_followed = false
    },
    // 取消对文章点赞
    async cancelZan () {
      await apiCancelZan(this.artid)
      // 手动将点赞态度改为无态度
      this.detailObj.attitude = -1
    },
    // 对文章点赞
    like () {
      apiLikeArticle(this.artid)
      // 手动将点赞态度改为 点赞
      this.detailObj.attitude = 1
    },
    // 取消对文章不喜欢
    async cancelDislike () {
      await apiCancelDislike(this.artid)
      // 手动将不喜欢改为 无态度
      this.detailObj.attitude = -1
    },
    // 对文章不喜欢
    async dislike () {
      await apiDislike(this.artid)
      // 将文章态度改为 不喜欢
      this.detailObj.attitude = 0
    },
    // 刷新评论
    passCom (val) {
      this.commentList.unshift(val)
    }
  },
  created () {
    // 获取文章详情
    this.getDetail()
  }
}
</script>

<style lang="less" scoped>
.detail{
  width: 100%;
  margin-top: 46px;
  margin-bottom: 54px;

  .detail-title {
    background-color: #3e9df8;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar .van-icon {
    color: #fff;
  }

  h1{
    text-align: center;
    padding: 20px 0 40px 0;
  }

  .author{
    display: flex;
    padding: 0 10px;
    margin-bottom: 30px;

    .avatar{
      img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    .content{
      flex: 1;

      .time{
      font-size:14px;
      color: #666;
      }
    }
  }

  .like{
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
  }
}

</style>
